Unlock the power of layout with CSS Grid, where design meets limitless possibilities!
Made using background-attachment: fixed;
CSS Grid is a powerful layout system in CSS that allows you to create complex two-dimensional grid layouts with ease. It introduces a new way to design web pages by dividing them into rows and columns. With CSS Grid, you can define a grid container and specify the size and alignment of its grid tracks. These tracks can be filled with grid items, such as elements or content areas, which can be positioned and ordered within the grid.
By using CSS Grid, you can achieve sophisticated and responsive layouts that adapt to different screen sizes and orientations without relying on complex CSS hacks or frameworks.
To start using CSS Grid, you need to define a grid container. This can be any element in your HTML markup, such as a <div> or a <section>. Apply the CSS property display: grid; to the container to activate grid layout.
.grid-container {
display: grid;
}
You can specify the structure of your grid by setting the number and size of rows and columns. You can use various units like pixels (px), percentages (%), or flexible units like fractions (fr) to define the dimensions.
.grid-container {
display: grid; /*Setting it to Grid*/
/* Make three columns. First of 300px, second of 100px, and third of 100px; */
grid-template-columns: 300px 100px 100px;
/* auto to automatically fill the rest of the available space*/
grid-template-columns: 300px auto 100px;
/* Three columns with a ratio of 1.2:2:4 */
grid-template-columns: 1.2fr 2fr 4fr;
/* You can use the repeat function in CSS to make multiple columns */
grid-template-columns: repeat(3, auto); /* auto assigns equal width */
/* create gap between the grid cells */
grid-gap: 2rem;
}
.grid-container {
display: grid;
/* Using grid-template-rows*/
grid-template-rows: 1fr 3fr 2fr; /* default is 1fr */
grid-auto-rows: 2fr; /* change the default to 3fr */
/* Using grid-template-columns */
grid-template-columns: 1fr 4fr;
grid-gap: 0.5rem;
}
Once you've defined the grid structure, you can position grid items within the grid. Grid items are the elements you want to place in the grid, such as <div> or <span> tags. Use the CSS property grid-row and grid-column to specify where the items should be placed.
#section-7 .box:first-child {
/* Place the item in column 1 to 3 */
grid-column-start: 1;
grid-column-end: 3;
/* Place the item in row 1 to 5 */
grid-row-start: 1;
grid-row-end: 5;
}
You can also use the Shorthand version:
/* allows overlapping */
#section-7 .box:nth-child(8){
/* start/end */
grid-column: 2 / span 3;
/* same as 2 / 5 */
grid-row: 4 / 6;
}
#section-8 .grid-container{
...
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 1rem;
justify-content: center;
overflow-y: scroll;
...
}
#section-8 .grid-container::-webkit-scrollbar{
display: none;
}
#section-8 .box {
...
aspect-ratio: 3/4;
...
}
Grid areas allow you to name regions of the grid, making it easier to place items within specific areas. You can then assign different grid-areas to different elements. This means that the order of the elements in the html document doesn't matter as they will be placed in their assigned grid-areas.
.grid {
display: grid;
grid-gap: 1rem;
/* We can list what elements will fill what cells using grid-template-areas */
grid-template-areas:
/* Fill the first row completely with navbar. */
'navbar navbar navbar navbar navbar'
/* Fill with main four-fifths of the way */
'main main main main aside'
'footer footer footer footer footer';
grid-template-rows: 1fr 9fr 1fr;
}
.navbar { grid-area: navbar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }